<!--
 * @Author: 宋绍华
 * @Date: 2024-11-11 14:50:10
 * @LastEditors: 宋绍华
 * @LastEditTime: 2024-11-11 15:50:05
 * @FilePath: \sr_system_manager_ui\src\views\project\components\ConfirmProject\index.vue
 * @Description: 
-->

<template>
  <el-dialog title="项目立项" v-model="vis" width="30%" :before-close="handleClose">
    <div class="dialog-content">
      <div class="mb-30px">是否确认项目通过立项</div>
      <div>
        <el-form ref="ruleFormRef" label-width="110px" :rules="rules" :model="form">
          <el-form-item label="项目编号" prop="no" mb-10px>
            <el-input v-model="form.no" placeholder="请输入项目编号" :maxlength="50" />
          </el-form-item>
          <el-form-item label="项目预算" prop="cash" mb-10px>
            <el-input placeholder="请输入预算金额" v-model="form.cash">
              <template #append>万元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="项目执行时间" prop="time" mb-10px>
            <el-date-picker type="daterange" v-model="form.time" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)">通过</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const vis = ref(false)
const ruleFormRef = ref()
watch(
  () => props.visible,
  val => {
    console.log(val, '--');
    vis.value = val
  },
  {
    immediate: true,
  }
)

const form = ref({
  no: '',
  cash: '',
  time: '',
})

const emit = defineEmits(['update:visible'])


const rules = reactive({
  no: [
    { required: true, message: '请输入项目编号', trigger: 'blur' },
  ],
  cash: [
    {
      required: true,
      message: '请输入项目预算',
      trigger: 'blur',
    },
  ],
  time: [
    {
      required: true,
      message: '请选择项目执行时间',
      trigger: 'blur',
    },
  ]
})

function handleClose() {
  vis.value = false
  emit('update:visible', false)
}

function onConfirm() {
  handleClose()
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="scss" scoped>
.dialog-content {
  padding: 20px;
}
</style>